<template>
  <view style="height: 100%;">
    <view class="classify_header">
      <scroll-view scroll-x :scroll-left="scrollLeft" v-if="tabsList.length">
        <view class="tabs">
          <view class="tabs_item" :class="{'tabs_current': index==tabsCurrent}" v-for="(item,index) in tabsList"
            :key="index" @click="changeTabsIndex(0, index)">
            <image class="tabs_img" :src="item.image" mode=""></image>
            <view class="title">{{item.name}}<br/>{{item.enname}}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="classify" v-if="tabsList.length && tabsList[tabsCurrent].sons && tabsList[tabsCurrent].sons.length">
      <view class="classify_l">
        <view class="classify_l_item" v-for="(item,index) in tabsList[tabsCurrent].sons" :key="index">
          <view class="l_title" v-if="index == secondCurrent">{{item.name}}</view>
          <view class="title" :class="{'title_bd':index-1 == secondCurrent}" v-else @click="changeTabsIndex(1, index)">
            {{item.name}}</view>
        </view>
      </view>
      <view class="classify_r bg-fff f-1">
        <scroll-view scroll-x :scroll-left="scrollLeft" v-if="tabsList.length">
          <div class="classify_r_tabs">
            <div class="classify_r_tabs_item" :class="{'classify_r_tabs_active': thirdCurrent == -1}"
              @click="changeTabsIndex(2, -1)">全部</div>
            <div class="classify_r_tabs_item" :class="{'classify_r_tabs_active': index == thirdCurrent}"
              v-for="(item,index) in tabsList[tabsCurrent].sons[secondCurrent].sons" :key="index"
              @click="changeTabsIndex(2, index)">
              {{item.name}}</div>
          </div>
        </scroll-view>
        <scroll-view scroll-y="true" class="scroll-Y">
          <div class="goods">
			  <navigator v-for="(item, index) in goodsList" :key="index" class="item bg-white mt20 row" hover-class="none" open-type="navigate"
			   :url="'/pages/goods_details/goods_details?id=' + item.id">
            <div class="goods_row">
              <image class="goods_row_img" :src="item.image"></image>
              <div class="goods_row_r">
                <div class="goods_row_title">{{item.name}}</div>
                <div class="goods_row_sales">已售 {{item.sales_sum}}件</div>
                <div class="goods_row_tag" :class="{'goods_row_tag_n': index != 0}">直降</div>
                <div class="goods_row_below">
                  <div class="goods_row_price"><span class="goods_row_price_num"><span
                        style="font-size: 26rpx;">¥</span>{{item.price}}</span>/起</div>
                </div>
              </div>
            </div>
			 </navigator>
          </div>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import { getGoodsSearch } from "@/api/store";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tabsCurrent: 0,
      secondCurrent: 0,
      thirdCurrent: -1,
      tabsList: [],
      goodsList: [],
    };
  },
  watch: {
    list(val) {
      val.forEach((item) => {
        if (item.type == 1) {
          this.tabsList.push(item);
        }
      });
      this.getList();
    },
  },
  methods: {
    changeTabsIndex(level, idx) {
      this[["tabsCurrent", "secondCurrent", "thirdCurrent"][level]] = idx;
      if (level == 0) {
        this.secondCurrent = 0;
        this.thirdCurrent = -1;
      } else if (level == 1) {
        this.thirdCurrent = -1;
      }
      this.getList();
    },
    async getList() {
      let obj = { category_id: "" };
      if (this.thirdCurrent != -1) {
        obj.category_id =
          this.tabsList[this.tabsCurrent].sons[this.secondCurrent].sons[
            this.thirdCurrent
          ].id;
      }else{
        obj.category_id =
          this.tabsList[this.tabsCurrent].sons[this.secondCurrent].id;
      }
      let data = await getGoodsSearch(obj);
      if (data.code == 1) {
        this.goodsList = data.data.list;
      }
    },
  },
};
</script>
<style>
page {
  /* background: #F6F5F3; */
  background: #fff;
}
</style>
<style lang="scss" scoped>
.tabs {
  // padding: 0 1px;
  white-space: nowrap;
  padding-top: 20rpx;

  .tabs_item {
    margin: 0 24rpx;
    display: inline-block;
    // width: 100rpx;
    // vertical-align: top;

    &:nth-child(1) {
      margin-left: 30rpx;
    }

    &:last-child {
      margin-right: 30rpx;
    }

    .tabs_img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: block;
      margin: 0 auto 16rpx;
    }

    .title {
      white-space: nowrap;
      color: #474748;
      font-size: 24rpx;
      text-align: center;
    }
  }

  .tabs_current {
    .title {
      color: #d60210;
      font-weight: 600;
    }
  }
}

.classify {
  padding-top: 40rpx;
  height: 100%;
  display: flex;

  .classify_l {
    width: 200rpx;
    height: 100%;
    background: #f6f5f3;

    .classify_l_item {
      text-align: center;
      .l_title {
        position: relative;
        color: #333;
        font-size: 26rpx;
        font-weight: 600;
        padding: 30rpx 10rpx;
        background: #fff;

        &:before {
          content: "";
          display: block;
          width: 8rpx;
          height: 36rpx;
          background: #c81600;
          position: absolute;
          top: 28rpx;
          left: 0;
        }
      }

      .title {
        color: #333;
        font-size: 26rpx;
        padding: 30rpx 10rpx;
      }

      .title_bd {
        border-top-right-radius: 32rpx;
      }
    }
  }

  .classify_r {
    // border-radius: 30rpx 30rpx 0 0;
    padding: 0 10rpx;
    width: 0;
    flex: 1;

    .classify_r_tabs {
      // display: flex;
      white-space: nowrap;
      .classify_r_tabs_item {
        color: #333333;
        font-size: 24rpx;
        width: 120rpx;
        padding: 6rpx 0;
        text-align: center;
        border-radius: 8rpx;
        margin-right: 16rpx;
        display: inline-block;
      }
      .classify_r_tabs_active {
        color: #ff660a;
        background: rgba(255, 102, 10, 0.06);
      }
    }

    .scroll-Y {
      height: 100%;
      padding-top: 20rpx;
    }

    .goods {
      margin-right: -10rpx;
      .goods_row {
        display: flex;
        margin-bottom: 20rpx;
        .goods_row_img {
          width: 176rpx;
          height: 176rpx;
        }

        .goods_row_r {
          flex: 1;
          margin-left: 16rpx;
          .goods_row_title {
            color: #333333;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 40rpx;
            padding-right: 10rpx;
          }
          .goods_row_sales {
            color: #999999;
            font-size: 24rpx;
          }
          .goods_row_tag {
            color: #ff5631;
            font-size: 20rpx;
            border: 1px solid #ff4b25;
            border-radius: 6rpx;
            display: inline-block;
            padding: 2rpx 8rpx;
            margin-top: 10rpx;
          }
          .goods_row_tag_n{
            visibility: hidden;
          }
          .goods_row_price {
            font-size: 26rpx;
            color: #8a8a8a;
            .goods_row_price_num {
              color: #ff4b25;
              font-size: 40rpx;
              font-weight: bold;
            }
          }
          .goods_row_below {
            display: block;
            justify-content: space-between;
            border-bottom: 1px solid #ebebeb;
            padding-bottom: 20rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}

.bg-fff {
  background: #fff;
}
</style>